<template>
	<view>
		<c-sticky>
			<c-status-bar />
			<c-header :title="post.title">
				<view class="iconfont icon-Actions-Controls-open-panel--bottom-32
				action-icon	" @tap="popupOpen"></view>
			</c-header>
		</c-sticky>

		<view class="m-4 flex justify-between">
			<view style="width: 450rpx;" class="flex">
				<!-- {{post}}
				 -->
				<c-image class="rounded" :src="post.avatarUrl" mode="aspectFill" style="width: 90rpx; height: 90rpx;" />
				<view class="flex flex-column ml-2">
					<text>{{post.username}}</text>
					<uni-dateformat class="font-sm secondary-color" :date="post.creat_date" format="yyyy-MM-dd"
						:threshold="[60000,3600000*24]"></uni-dateformat>

				</view>
				<!-- <view></view> -->
			</view>
			<view>
				<c-button class="px-3 bg-white">关注</c-button>
			</view>
		</view>



		<unicloud-db v-slot="{data,loading,error,hasMore}" collection="posts" :where="`'${post._id}'==_id`"
			field="content" getone>
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<!-- {{data}} -->
				<c-scroll-load-more v-if="loading" :loading="loading" class="mt-5" :hasMore="hasMore" />
				<mp-html v-else class="m-4 transition-all" :content="data && data.content"
					:container-style="`opacity:${imgLoadedSuccessStatus?1:0.4}`" @ready="onMphtmlReady"></mp-html>


				<view class="mx-1" v-if="imgLoadedSuccessStatus">
					<text v-for="(u,i) of post.topics" :key="i" class="p-1 px-2 mx-2 font-sm topic rounded">{{u}}</text>
				</view>


			</view>
		</unicloud-db>

		<!-- 回顶部 -->
		<c-back-top bottom="130rpx" />





		<!-- 评论框 -->
		<view class="position-fixed bottom-0 bg-white w-100 flex align-center px-3" style="height: 110rpx;">
			<view style="width: 450rpx;">
				<uni-easyinput class="rounded input-bg-color" :input-border="false" confirmType="send" v-model="comment"
					@confirm="postCommentRelease" placeholder="发布评论"></uni-easyinput>
			</view>

			<view class="iconfont flex align-center" style="width: 24rpx;">
				<view class="ml-4 mr-1">
					<c-temp v-slot="op">
						<text @tap="postPraise(op)" class="icon-dianzan" :class="activeColor(post.praiseStatus)"></text>
						<text>{{post.praiseNum}}</text>

					</c-temp>
				</view>

				<view class="iconfont ml-4 mr-1" style="width: 24rpx;">
					<text class="icon-pinglun"></text>
					<text>2</text>
				</view>
			</view>
		</view>





<!-- 具体的评论 -->
		<unicloud-db 
		v-if="imgLoadedSuccessStatus"
		v-slot="{data,loading,error,hasMore}" collection="comments,uni-id-users"
			:where="`post_id == '${post._id}' && comment_type == 0`" :field="commentsField">
			<view v-if="error">{{error.message}}</view>
			<view v-else class="mt-4">
				<c-desc title="评论" />
				<c-comment v-for="v in data" :key="v._id" :v="v" />
			</view>
		</unicloud-db>



		<view style="height: 250rpx;" />


		<!-- 收藏的弹出框 -->
		<uni-popup ref="popup" type="bottom">
			<view style="height: 180rpx;" class="bg-white flex align-center justify-center flex-column">
				<view class="iconfont icon-shoucang1" style="font-size: 55rpx;">
					<text>收藏</text>
				</view>
			</view>
		</uni-popup>



	</view>
</template>

<script>
	import cHeader from './header.vue'
	import BackTopMixin from "@/components/c-back-top/c-back-top-mixin.js"
	export default {
		mixins: [BackTopMixin],
		components: {
			cHeader
		},
		onLoad() {
			uni.$emit('getPost', v => this.post = v)
		},
		data() {
			const commentsField = `arrayElemAt(user_id.username,0) as username,
			arrayElemAt(user_id.avatar,0) as avatarUrl,arrayElemAt(user_id._id,0)
			as comment_user_id,comment_content,comment_date
			`
			return {
				commentsField,
				post: {},
				// loading:false,
				imgLoadedSuccessStatus: false,
				comment: ""
			}
		},
		methods: {
			activeColor(praiseStatus) {
				return praiseStatus && 'main-color'
			},
			async postPraise(op) {
				const unLoading = op.useLoading()
				const hasPraise = this.post.praiseStatus


				try {
					await this.$A.post.praise({
						uid: this.uid,
						postID: this.post._id,
						praiseStatus: this.post.praiseStatus
					})
					if (hasPraise) {
						this.post.praiseNum--
					} else {
						this.post.praiseNum++
					}

					this.post.praiseStatus = !this.post.praiseStatus

				} catch (e) {
					//TODO handle the exception
					this.$U.notice(e.message)
				} finally {
					unLoading()
				}

			},
			postCommentRelease(v) {
				const hasComment = Boolean(v.length)
				if (hasComment) {
					// console.log(v)
					uni.showModal({
						content: "发布评论",
						confirmText: "确认",
						cancelText: "取消",
						success: async op => {
							const {
								confirm
							} = op
							// console.log(op)
							if (confirm) {
								try {
									this.$U.loading()
									await this.$A.comment.createPost({
										post_id: this.post._id,
										comment_content: v
									})

									this.$U.notice("评论成功")
								} catch (e) {
									//TODO handle the exception
									this.$U.notice(e.message)
								} finally {
									this.$U.hideLoading()
									uni.hideKeyboard()
									this.comment = ""
								}
							}
						}
					})
				}
			},
			popupOpen() {
				this.$refs.popup.open()
			},
			onMphtmlReady() {
				this.imgLoadedSuccessStatus = true
			}

		}
	}
</script>

<style scoped>
	.action-icon {
		font-size: 45rpx;
	}

	.topic {
		color: #595959;
		background-color: #f5f5f5;
	}
</style>